<template>
  <div>
    <el-form :inline="true" class="user-search">
      <el-form-item label=":">
        <el-input size="small" v-model="queryForm.roleName" clearable placeholder="角色名称"></el-input>
      </el-form-item>
      <el-button size="small" type="primary" icon="el-icon-search" @click="list">查询</el-button>
      <el-button type="success" icon="el-icon-plus" circle></el-button>
    </el-form>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="roleId" label="ID" width="50">
      </el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="120">
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="120">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="120">
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryForm.page"
        :page-sizes="[5,10, 25, 50, 100]" :page-size="queryForm.rows" layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total">
      </el-pagination>
    </div>

    <el-dialog title="新增" :visible.sync="dialogMergeFormVisible">
      <el-form :model="mergeForm" :rules="mergeFormRules" ref="mergeForm" label-width="100px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="mergeForm.username" autocomplete="off" :disabled="true" class="disabled"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="mergeForm" :rules="mergeFormRules" ref="mergeForm" label-width="100px">
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="mergeForm.remark" autocomplete="off" :disabled="true" class="disabled"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="mergeForm" :rules="mergeFormRules" ref="mergeForm" label-width="100px">
        <el-form-item label="授权" prop="svrType">
          <el-input v-model="mergeForm.svrType" autocomplete="off" :disabled="true" class="disabled"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogMergeFormVisible">取 消</el-button>
        <el-button type="primary" @click="doSubmit">确 定</el-button>
        <el-input type="hidden" v-model="mergeForm.id"></el-input>
      </div>
    </el-dialog>

    <!-- 树型控件 -->
    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      :default-expanded-keys="[2, 3]"
      :default-checked-keys="[5]"
      :props="defaultProps">
    </el-tree>

  </div>


</template>

<script>
 export default {
    data() {
      return {
        data: [{
          id: 1,
          label: '系统管理',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 20,
              label: '三级 1-1-1'
            }, {
              id: 21,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '酒店管理',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '商品管理',
          children: [{
            id: 7,
            label: '二级 2-1'
          }, {
            id: 8,
            label: '二级 2-2'
          }]
        }, {
          id: 4,
          label: '订单管理',
          children: [{
            id: 9,
            label: '二级 2-1'
          }, {
            id: 10,
            label: '二级 2-2'
          }]
        }, {
          id: 5,
          label: '文件管理',
          children: [{
            id: 11,
            label: '二级 2-1'
          }, {
            id: 12,
            label: '二级 2-2'
          }]
        }, {
          id: 6,
          label: '内容管理',
          children: [{
            id: 13,
            label: '二级 2-1'
          }, {
            id: 14,
            label: '二级 2-2'
          }]
        }, {
          id: 7,
          label: '房型管理',
          children: [{
            id: 15,
            label: '二级 2-1'
          }, {
            id: 16,
            label: '二级 2-2'
          }]
        }, {
          id: 8,
          label: '营销管理',
          children: [{
            id: 17,
            label: '免房券',
            children: [{
              id:22 ,
              ladel:'查看'
          },{
            id:23 ,
            ladel:'新增'
          },{
            id:24 ,
            ladel:'修改'
          },{
            id: 25,
            ladel:'删除'
          },{
            id: 18 ,
            ladel:'早餐券',
            children:[{
              id: 26,
              ladel:'查看',
          },{
            id: 27,
            ladel:'新增'
          },{
            id: 28,
            ladel:'修改'
          },{
            id:29 ,
            ladel:'删除'
          },{
            id: 19,
            ladel:'优惠券',
            children:[{
              id:30 ,
              ladel:'查看'
          },{
            id:31 ,
            ladel:'新增'
          },{
            id:32 ,
            ladel:'修改'
          },{
            id: 33,
            label: '删除',
            }]
            }]
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

<style>
</style>
